<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form" v-loading="loading">
            <el-form-item prop="name" label="班级名" label-width="80px">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="grade" label="年级" label-width="80px">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="majorId" label="所属专业" label-width="80px">
                <el-select v-model="form.majorId" placeholder="请选择专业">
                    <el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>

    </div>
</template>

<script>
import { majorName, classInfo, classEdit } from '@/api/admin/class';
export default {
    props: ["editId"],
    data() {
        return {
            dialogFormVisible: false,
            form: {
                grade: "",
                majorId: "",
                id: -1,
                name: ""
            },
            loading: false,
            majors: [],
            rules: {
                name: [
                    { required: true, message: "请输入班级名", trigger: 'blur' }
                ],
                grade: [
                    { required: true, message: "请输入年级", trigger: 'blur' }
                ],
                majorId: [
                    { required: true, message: "请输入系名", trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        getList() {
            this.loading = true
            classInfo(this.editId).then(res => {
                if (res.code === 0) {
                    this.form = res.data
                }
            }).finally(() => {
                this.loading = false
            })
        },
        getMajor() {
            majorName().then(res => {
                console.log(res.data)
                this.majors = res.data
            })
        },
        submit() {
            // console.log(this.form)
            this.$refs["form"].validate(f => {
                if (f) {
                    classEdit(this.form).then(res => {
                        // console.log(res)
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: res.data
                            })
                            this.$emit("close")
                        }
                    })
                }
            })
        },
        cancel() {
            this.$emit("cancelAdd")
        }
    },
    mounted() {
        this.getMajor()
        this.getList()
    }
}
</script>

<style lang="scss" scoped></style>